<template>
    <div class="mj-version">
        <editor-title
            title="模式选择"
            tips="指定midjourney生成模式, 该参数主要影响生成速度。"
            required
        />

        <el-select
            v-model="currentMode"
            placeholder="请选择模式"
            class="w-full mt-[8px]"
            size="large"
        >
            <el-option
                v-for="(item, index) in mjMode"
                :key="index"
                :label="item.name"
                :value="item.type"
            />
        </el-select>
    </div>
</template>

<script setup lang="ts">
import { useVModels } from '@vueuse/core'
import { config, formData} from '../../hooks/useDrawEffect'
import editorTitle from '../common/editor-title.vue'

interface MjModeType {
    type: string;
    name: string;
    points: number;
}

const emits = defineEmits<{
    (event: 'update:modelValue', value: string): void
}>()

const props = defineProps({
    // 模式: [relax=慢速,fast=快速,turbo=极速]
    modelValue: {
        type: String,
        default: 'relax'
    }
})

const { modelValue: currentMode } = useVModels(props, emits)

const mjMode = computed<MjModeType[]>(() => config.value?.mj_mode as MjModeType[])

watch(
    () => [formData.value.other_params?.mode, config.value?.mj_mode],
    ([v1, _v2]) => {
        if (!config.value?.mj_mode || config.value?.mj_mode.length <= 0) {
            return
        }

        if (v1 && v1 !== currentMode.value) {
            currentMode.value = v1
        }

        for (let i = 0; i < config.value?.mj_mode.length; i++) {
            const item = config.value?.mj_mode[i]
            if (item.type === v1) {
                config.value.points = item.points
                break
            }
        }
    }, { immediate: true }
)
</script>
